<script setup lang="ts">
import { ref } from 'vue'
import HotMusic from '@/components/library/HotMusic.vue'
import MusicList from '@/components/library/MusicList.vue'
import AddToPlaylistModal from '@/components/PlayList/AddToPlaylistModal.vue'

// 控制模态框的状态
const showAddToPlaylistModal = ref(false)
const selectedSongIds = ref<string[]>([])

// 处理添加到歌单
const handleAddToPlaylist = (songIds: string[]) => {
  selectedSongIds.value = songIds
  showAddToPlaylistModal.value = true
}

// 处理添加成功
const handleAddSuccess = () => {
  showAddToPlaylistModal.value = false
  // 可能需要刷新列表
}
</script>

<template>
  <div class="library">
    <HotMusic />
    <MusicList @add-to-playlist="handleAddToPlaylist" />

    <!-- 模态框放在视图级别 -->
    <AddToPlaylistModal
      v-model:visible="showAddToPlaylistModal"
      :song-ids="selectedSongIds"
      @success="handleAddSuccess"
    />
  </div>
</template>

<style scoped lang="scss">
.library {
  padding: 20px;
  
  section {
    margin-bottom: 40px;

    h2 {
      font-size: 24px;
      margin-bottom: 20px;
      color: var(--primary-color);
    }
  }
}
</style>